<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="../css/test.css" rel="stylesheet">
    <title>Categories</title>
</head>
<body>

<header th:replace="common/top.html"></header>
<section class="content">
    <main>
        <div class="container">
            <div class="title">Categories</div>
            <form action="/category/getSpecialCategory" method="post" class="form-horizontal">
                <section class="section">
                    <div class="field">
                        <label class="label">Category Search: </label>
                        <div class="control">
                            <input class="input" type="text" name="categoryNameSearch" id="categoryNameSearch"
                                   placeholder="input the name of category to search">
                        </div>
                        <!--        <p class="help">This is a help text</p>-->
                    </div>
                    <div class="control">
                        <button class="button is-primary">Submit</button>
                    </div>
                </section>
                <!--    <div class="form-group">-->
                <!--        <label for="categoryNameSearch" class="col-sm-2 control-label">categoryNameSearch:</label>-->
                <!--        <div class="col-sm-10">-->
                <!--            <input type="text"  name="categoryNameSearch" class="form-control" id="categoryNameSearch" placeholder="input the name of category to search">-->
                <!--        </div>-->

                <!--        <div class="form-group">-->
                <!--            <div class="col-sm-offset-2 col-sm-10">-->
                <!--                <button type="submit" class="btn btn-default">search</button>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
            </form>
            <table id="category" class="table table-bordered table-striped table-hover">
                <tr>
                    <td>Category Name</td>
                    <td>Category Description</td>
                </tr>
                <tr th:each="category:${categoryList}">
                    <td>
                        <a th:href="@{/product/getProductView(categoryName=${category?.name})}"
                           th:text="${category?.name}"></a>
                    </td>
                    <td th:utext="${category?.description}"></td>
                </tr>

            </table>
        </div>
    </main>
</section>

<header th:replace="common/bottom.html"></header>

</body>
</html>